<template>
  <div class="wrap" id="">
    <div class="search_form">
      <div class="logo"><img src="@/assets/logo.png" alt="logo" /></div>
      <div class="form_group">
        <input
          v-model.trim="inputVal"
          @keyup.enter="search"
          type="text"
          class="input_txt"
          placeholder="请输入查询的天气"
        />
        <button class="input_sub" :class="{ loading: loading }" @click="search">
          搜 索
        </button>
      </div>
      <div class="hotkey">
        <a href="javascript:;" @click.prevent="aClick('北京')">北京</a>
        <a href="javascript:;" @click.prevent="aClick('上海')">上海</a>
        <a href="javascript:;" @click.prevent="aClick('广州')">广州</a>
        <a href="javascript:;" @click.prevent="aClick('深圳')">深圳</a>
      </div>
    </div>
    <ul class="weather_list">
      <li v-for="(item, index) in list" :key="index">
        <div class="info_type">
          <!-- 阴 -->
          <span class="iconfont" v-if="item.wea.includes('阴')">&#xe92d;</span>
          <!-- 雨 -->
          <span class="iconfont" v-else-if="item.wea.includes('雨')"
            >&#xe931;</span
          >
          <!-- 晴 -->
          <span class="iconfont" v-else-if="item.wea.includes('晴')"
            >&#xe933;</span
          >
          <!-- 雪 -->
          <span class="iconfont" v-else-if="item.wea.includes('雪')"
            >&#xeb87;</span
          >
          <!-- 云 -->
          <span class="iconfont" v-else-if="item.wea.includes('云')"
            >&#xeb79;</span
          >
          <!-- 雷 -->
          <span class="iconfont" v-else-if="item.wea.includes('雷')"
            >&#xeb77;</span
          >
          <!-- 雹 -->
          <span class="iconfont" v-else-if="item.wea.includes('雹')"
            >&#xeb76;</span
          >
          <!-- 雾 -->
          <span class="iconfont" v-else>&#xeb75;</span>
        </div>
        <div class="info_temp">{{ item.narrative }}</div>
        <div class="info_date">
          <b>{{ city }}</b
          ><span>{{ item.date }}</span>
        </div>
      </li>
    </ul>
    <!-- 下面是模板 -->
    <div class="tem" v-if="false">
      <h2>模板</h2>
      <!-- 雨 -->
      <span class="iconfont">&#xe931;</span>
      <!-- 晴 -->
      <span class="iconfont">&#xe933;</span>
      <!-- 阴 -->
      <span class="iconfont">&#xe92d;</span>
      <!-- 雪 -->
      <span class="iconfont">&#xeb87;</span>
      <!-- 云 -->
      <span class="iconfont">&#xeb79;</span>
      <!-- 雷 -->
      <span class="iconfont">&#xeb77;</span>
      <!-- 雹 -->
      <span class="iconfont">&#xeb76;</span>
      <!-- 雾 -->
      <span class="iconfont">&#xeb75;</span>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      inputVal: '深圳',
      list: [],
      city: '',
      loading: false
    }
  },
  methods: {
    async search () {
      if (this.inputVal !== '') {
        this.loading = true
        const res = await axios({
          url: `http://ajax-api.itheima.net/api/weather?city=${this.inputVal}`
        })
        this.loading = false
        this.list = res.data.data.data
        this.city = res.data.data.city
        console.log('search', res)
      } else {
        alert('请输入内容')
      }
    },
    aClick (str) {
      this.inputVal = str
      this.search()
    }
  },
  created () {
    this.search()
  }
}
</script>
<style>
@import url('~@/styles/css/reset.css');
@import url('~@/styles/css/iconfont.css');
@import url('~@/styles/css/main2.css');
.tem .iconfont {
  font-size: 50px;
}
</style>
